<template>
    <div class="fsummary">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('/index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem>财务管理</BreadcrumbItem>
          <BreadcrumbItem>报表管理</BreadcrumbItem>
          <BreadcrumbItem>汇总表</BreadcrumbItem>
        </Breadcrumb>
        <Content id="tal" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="f-header" ghost>
            <div class="f-header-search">
              <span>搜索条件：</span>
                  <span>会计科目：</span>
                  <Select v-model="km" style="width:30%" placeholder="请选择会计科目...">
                    <Option value="全部">全部</Option>
                    <Option value="应收账款">应收账款</Option>
                    <Option value="应付账款">应付账款</Option>
                    <Option value="其他应收账款">其他应收账款</Option>
                    <Option value="其他应付账款">其他应付账款</Option>
                  </Select>
                  <span>时间：</span>
                  <DatePicker v-model="beginTime" type="date" placeholder="请选择开始时间..." ></DatePicker>
                  <DatePicker v-model="endTime" type="date" placeholder="请选择结束时间..." ></DatePicker>
            </div>
            <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            <Button type="primary" @click="toDown"><Icon type="md-download" />导出</Button>
          </div>
          <div class="f-content" style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
            <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
              <Table :columns="tb_columns" :height="666"  :data="report_list" size="small" ref="table"></Table>
              <Page :total="report_total" :current="report_current_page" :page-size="report_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
            </div>
          </div>
        </Content>
      </Layout>
    </div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex';
    import {toGet,toPost} from "../../utils/MyAxios";
    export default {
        name: "fsummary",
      data() {
        return {
          search:'',
          km:'全部',
          beginTime:'',
          endTime:'',
          tb_columns: [
            {
              title: '日期',
              key: 'expenseDate',
              align: 'center'
            },
            {
              title: '凭证号',
              key: 'documentNumber',
              align: 'center'
            },
            {
              title: '科目编码',
              key: 'coding',
              align: 'center'
            },
            {
              title: '会计科目',
              key: 'accountingSubject',
              align: 'center'
            },
            {
              title: '对方科目',
              key: 'counterpartSubject',
              align: 'center'
            },
            {
              title: '摘要',
              key: 'summary',
              align: 'center'
            },
            {
              title: '借方',
              key: 'debit',
              align: 'center'
            },
            {
              title: '贷方',
              key: 'credit',
              align: 'center'
            },
            {
              title: '往来单位',
              key: 'transitUnit',
              align: 'center'
            },
            {
              title: '方向',
              key: 'direction',
              align: 'center'
            },
            {
              title: '余额',
              key: 'balance',
              align: 'center'
            },
            {
              title: '创建时间',
              key: 'createTime',
              align: 'center'
            },
          ],
        }
      },
      computed: {
        ...mapGetters(['report_list','report_total','report_current_page','report_page_size']),
      },
      methods: {
        ...mapActions(['getReportList']),
        onChange(currentPage){
          this.getReportList({
            'search':this.search,
            'category':this.km,
            'beginTime':this.formatDate(this.beginTime),
            'endTime':this.formatDate(this.endTime),
            'currentPage':currentPage*1,
            'pageSize':this.report_page_size
          });
        },
        jump(e){
          this.$router.push(e);
        },
        toDown(){
          swal({
            title: "您确认导出汇总表数据吗？",
            icon: "info",
            buttons: ["取消", "确认下载"],
          })
            .then((willDown) => {
              if (willDown) {
                if(this.report_list.length>0){
                  this.$refs.table.exportCsv({
                    filename: this.km+'表数据('+this.formatDate(new Date().toDateString())+')'
                  });
                }else{
                  swal("无法导出!", "表格暂无数据!", "error");
                }
              }
            });
        },
        onPageSizeChange(pageSize){
          this.getReportList({
            'search':this.search,
            'category':this.km,
            'beginTime':this.formatDate(this.beginTime),
            'endTime':this.formatDate(this.endTime),
            'currentPage':this.report_current_page,
            'pageSize':pageSize*1
          });
        },
        toSearch(){
          this.getReportList({
            'search':this.search,
            'category':this.km,
            'beginTime':this.formatDate(this.beginTime),
            'endTime':this.formatDate(this.endTime),
            'currentPage':this.report_current_page,
            'pageSize':this.report_page_size
          });
        },
        formatDate(date){
          if(date){
            let time = new Date(date);
            return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
          }else{
            return '';
          }
        }
      },
      mounted() {
        this.getReportList({
          'search':this.search,
          'category':this.km,
          'beginTime':this.formatDate(this.beginTime),
          'endTime':this.formatDate(this.endTime),
          'currentPage':1,
          'pageSize':10
        });
      },
    }
</script>

<style lang="css" scoped>

</style>
